<template>
  <div class="login">
    <div class="left">
      <img src="../assets/images/login-background.png" alt="" />
      <div class="copy-right-tips">
        {{ copyright }}
      </div>
    </div>
    <div class="right">
      <div class="logo-img">
        <img :src="logoImg" alt="logo" />
      </div>
      <div class="title">
        {{ title }}
      </div>
      <el-form
        ref="loginForm"
        :model="loginForm"
        label-position="top"
        :rules="loginRules"
        class="login-form"
      >
        <el-form-item label="工号" prop="username">
          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
            <template #prefix>
              <svg-icon icon-class="user" class="el-input__icon input-icon" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            auto-complete="off"
            placeholder="密码"
            @keyup.enter="handleLogin"
          >
            <template #prefix>
              <svg-icon icon-class="password" class="el-input__icon input-icon" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="captchaEnabled" prop="code">
          <el-input
            v-model="loginForm.code"
            auto-complete="off"
            placeholder="验证码"
            style="width: 63%"
            @keyup.enter="handleLogin"
          >
            <template #prefix>
              <svg-icon icon-class="validCode" class="el-input__icon input-icon" />
            </template>
          </el-input>
          <div class="login-code">
            <img :src="codeUrl" class="login-code-img" @click="getCode" />
          </div>
        </el-form-item>
        <div class="option">
          <el-checkbox v-model="loginForm.rememberMe"> 记住账号密码 </el-checkbox>
          <!--   <el-button type="primary" link>
            重置密码
          </el-button> -->
        </div>

        <el-form-item style="width: 100%">
          <el-button
            :loading="loading"
            type="primary"
            style="width: 100%"
            @click.prevent="handleLogin"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
          <div v-if="register" style="float: right">
            <router-link class="link-type" to="/register"> 立即注册 </router-link>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!--  底部  -->
    <!-- <div class="el-login-footer">
      <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
    </div> -->
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import { decrypt, encrypt } from '@/utils/jsencrypt';
  import {
    getPassword,
    getRememberMe,
    getTenantName,
    getUsername,
    removePassword,
    removeRememberMe,
    removeTenantName,
    removeUsername,
    setPassword,
    setRememberMe,
    setTenantId,
    setTenantName,
    setUsername,
  } from '@/utils/auth';
  import logoImg from '@/assets/logo/logo.png';

  export default {
    name: 'Login',
    data() {
      return {
        codeUrl: '',
        title: import.meta.env.VITE_APP_TITLE,
        loginForm: {
          loginType: 'uname',
          username: 'admin',
          password: 'admin123',
          captchaVerification: '',
          mobile: '',
          mobileCode: '',
          rememberMe: false,
          tenantName: '',
        },
        loginRules: {
          username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
          password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
          code2: [{ required: true, trigger: 'change', message: '请输入验证码' }],
        },
        loading: false,
        // 验证码开关
        captchaEnabled: false,
        // 注册开关
        register: false,
        redirect: undefined,
        curYear: new Date().getFullYear(),
        logoImg,
      };
    },
    computed: {
      copyright() {
        return `百辰源(广州)科技有限公司 版权所有©2013-${this.curYear}，All rights reseved. 关于智慧护理 | 联系客服`;
      },
    },
    watch: {
      $route: {
        handler(route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true,
      },
    },
    created() {
      this.getCode();
      this.getCookie();
    },
    methods: {
      getCode() {},
      getCookie() {
        const username = getUsername();
        const password = getPassword();
        const rememberMe = getRememberMe();
        const tenantName = getTenantName();
        this.loginForm = {
          ...this.loginForm,
          username: username || this.loginForm.username,
          password: password || this.loginForm.password,
          rememberMe: rememberMe ? getRememberMe() : false,
          tenantName: tenantName || this.loginForm.tenantName,
        };
      },
      handleLogin() {
        const captchaParams = {};
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.loading = true;
            // 设置 Cookie
            if (this.loginForm.rememberMe) {
              setUsername(this.loginForm.username);
              setPassword(this.loginForm.password);
              setRememberMe(this.loginForm.rememberMe);
              setTenantName(this.loginForm.tenantName);
            } else {
              removeUsername();
              removePassword();
              removeRememberMe();
              removeTenantName();
            }
            this.loginForm.captchaVerification = captchaParams.captchaVerification;

            this.$store
              .dispatch(this.loginForm.loginType === 'sms' ? 'SmsLogin' : 'Login', this.loginForm)
              .then(() => {
                this.$router.push({ path: this.redirect || '/' }).catch(() => {
                  this.loading = false;
                });
              })
              .catch(() => {
                this.loading = false;
              });
          }
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .login {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .left {
      height: 100%;
      flex: 1 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(299.89deg, #f5fdf8 22.28%, #ffffff 120.81%);
      position: relative;
      .copy-right-tips {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background: #f5fdf8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #999999;
      }
    }
    .right {
      height: 100%;
      width: 480px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background: #ffffff;
      box-shadow: 0px 4px 16px rgba(53, 143, 128, 0.04);
      .logo-img {
        width: 120px;
        height: 120px;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        margin-top: -20px;
        margin-bottom: 10px;
        & > img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
      .title {
        width: 320px;
        font-weight: 600;
        color: #000000;
        font-size: 24px;
        text-align: center;
        margin-bottom: 40px;
      }
      .option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30px;
      }
    }
  }

  .login-form {
    border-radius: 6px;
    background: #ffffff;
    width: 320px;
    /* padding: 25px 25px 5px 25px; */
    .el-input {
      height: 38px;
      input {
        height: 38px;
      }
    }
    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 2px;
    }
  }
  .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }
  .login-code {
    width: 33%;
    height: 38px;
    float: right;
    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }
  .el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }
  .login-code-img {
    height: 38px;
  }
</style>
